<template>
	<gracePage class="main-bodybg-color" headerBG="#FFFFFF" :bounding="false">
		<view slot="gHeader" class="grace-bg-white">
			<!--  演示一个渐变背景，请根据项目实际需求自行改进  -->
			<view class="grace-header-body">
				<!-- 返回按钮 -->
				<view class="grace-header-icons grace-icons icon-arrow-left " @tap="appFn.navigateBackFn"></view>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex">臻之筱</view>
			</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody">
			<!-- 搜索组件宽度自适应于外层 -->
			<view style="padding:25rpx 50rpx;" class="grace-bg-white">
				<view class="grace-header-body">
					<!-- 中间内容 -->
					<view class="grace-header-content-noflex"><graceSearch @inputting="inputting" @confirm="confirm" background="#f4f4f4" :kwd="searchKey"></graceSearch></view>
					<!-- 设置按钮 -->
					<!-- <view class="grace-header-icons grace-icons icon-set grace-white" @tap="set"></view> -->
					<view class="ml-1" @click="submitFn"><text>搜索</text></view>
				</view>
			</view>
			<view class="grace-body"></view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceSearch from '../../graceUI/components/graceSearch.vue';
export default {
	data() {
		return {
			searchKey: '',
			oneGoStatus:true
		};
	},
	onLoad: function() {},
	methods: {
		inputting: function(e) {
			console.log(e);
			this.searchKey = e;
		},
		confirm: function(e) {
			console.log(e);
			if(e == '') return;
			console.log('提交')
			this.gotoPage(e)
		},
		setKey: function(e) {
			var key = e.currentTarget.dataset.key;
			this.searchKey = key;
			console.log('this.searchKey', this.searchKey);
		},
		submitFn(){
			if(this.searchKey== ''){
				return;
			}
			this.gotoPage(this.searchKey)
		},
		gotoPage(stext) {
			if (this.oneGoStatus) {
				console.log('text',stext)
				this.oneGoStatus = false;
				uni.navigateTo({
					url: '/pages/shop/shopList/shopList?sreachText='+stext,
					complete: () => {
						console.log(123)
						this.oneGoStatus = true;
					}
				});
			}
			
		},
	},
	components: {
		gracePage,
		graceSearch
	}
};
</script>
<style>
.grace-search-tags {
	padding: 10rpx 0;
}
.grace-search-tags-items {
	padding: 5rpx 20rpx;
	border-radius: 30rpx;
	margin-right: 15rpx;
	margin-bottom: 15rpx;
	font-size: 24rpx;
	line-height: 40rpx;
	border-width: 1px;
	border-style: solid;
	border-color: #f1f1f1;
	color: #a5a7b2;
	font-size: 26rpx;
}
.sreachBtn {
	border-radius: 100rpx !important;
	padding: 0px 30rpx;
	line-height: 70rpx;
}
</style>
